<script setup lang="ts">
import {reactive, ref, nextTick} from 'vue'
import MedicineAPI, {MedicineData} from "@/api/medicine";
import {ElMessage, FormInstance, FormRules} from "element-plus";

const state = reactive({
  visible: false,
  loading: false,
  form: reactive<Partial<MedicineData>>({
    qty: 0,
    prescribeUnit: 'mg'
  })
})
const formRef = ref<FormInstance>()
const $emit = defineEmits(['refreshDataList'])
const rules = ref<FormRules<MedicineData>>({
  code: [{required: true, message: '不能为空', trigger: 'blur'}],
  endcode: [{required: true, message: '不能为空', trigger: 'blur'}],
  name: [{required: true, message: '不能为空', trigger: 'blur'}],
  spec: [{required: true, message: '不能为空', trigger: 'blur'}],
  unit: [{required: true, message: '不能为空', trigger: 'blur'}],
  prescribeUnit: [{required: true, message: '不能为空', trigger: 'blur'}]
})
const init = (row?: MedicineData) => {
  state.visible = true
  state.loading = true

  state.form = row as Partial<MedicineData> || {
    qty: 0,
    prescribeUnit: 'mg'
  }
  state.loading = false
}
defineExpose({
  init
})

const submit = () => {
  formRef.value!.validate((valid) => {
    if (valid) {
      state.loading = true
      MedicineAPI.submit(state.form as MedicineData)
          .then(() => {
            ElMessage.success('操作成功')
            $emit('refreshDataList')
            nextTick(() => {
              // state.visible = false
              init()
            })
          })
          .catch((err) => {
            state.loading = false
            console.error(err)
            ElMessage.error('操作失败')
          })
    }
  })
}
</script>

<template>
  <el-dialog
      v-model="state.visible"
      title="药品"
      width="50%"
      top="60px"
      append-to-body
  >
    <div v-loading="state.loading">
      <el-form
          :model="state.form"
          ref="formRef"
          label-width="auto"
          :rules="rules"
          scroll-to-error
      >
        <el-form-item label="药品代码" prop="code">
          <el-input v-model="state.form.code" />
        </el-form-item>
        <el-form-item label="药品编码" prop="endcode">
          <el-input v-model="state.form.endcode" />
        </el-form-item>
        <el-form-item label="药品名称" prop="name">
          <el-input v-model="state.form.name" />
        </el-form-item>
        <el-form-item label="规格" prop="spec">
          <el-input v-model="state.form.spec" />
        </el-form-item>
        <el-form-item label="单位" prop="unit">
          <el-input v-model="state.form.unit" />
        </el-form-item>
        <el-form-item label="处方单位" prop="prescribeUnit">
          <el-input v-model="state.form.prescribeUnit" />
        </el-form-item>
        <el-form-item label="医保国家编码" prop="nactionInsurCode">
          <el-input v-model="state.form.nactionInsurCode" />
        </el-form-item>
        <el-form-item label="数量" prop="qty">
          <el-input-number v-model="state.form.qty" />
        </el-form-item>
        <el-form-item label="单价" prop="price">
          <el-input-number v-model="state.form.price" />
        </el-form-item>
      </el-form>
    </div>
    <template #footer>
      <el-button type="primary" @click="submit">提交</el-button>
      <el-button @click="state.visible = false">关闭</el-button>
    </template>
  </el-dialog>
</template>

<style scoped>

</style>